<!-- 
@name: 首页
-->
<template>
	<div id="payOrder" class="page ">
		<!--pages/commodityDetails/commodityDetails.vml-->
		<div class="flex-center flex-column">
			<div class="flex-row flex-alignCenter" style="	margin-top: 0.2rem;
		margin-bottom: 0.4rem;">
				<div class="text1">支付剩余时间</div>
				<div>
					<van-count-down :time="time">
						<template #default="timeData">
							<div class="">
								<span class="timeData">{{ timeData.minutes }}</span>
								<span class="timeData">:</span>
								<span class="timeData">{{ timeData.seconds }}</span>
							</div>
						</template>
					</van-count-down>
				</div>
			</div>
			<div class="text2">{{detailData.priceAll}}</div>
		</div>
		<van-skeleton title :row="3" :loading="!detailData.pkey">
			<div style='margin-bottom:100rpx;'>
				<div class='whiteWrap'>
					<div class="goodsWrap">
						<div class="flex-row" style="padding-bottom:0.0rem;">
							<img object-fit="fill" class="icon1" :src="detailData.goodsPhoto?detailData.goodsPhoto[0]:''"></img>
							<div class="flex-column " style="flex:1">
								<div class="flex-between flex-alignCenter">
									<div class="text3">{{detailData.goodsName}}</div>
									<div class="text4">X{{detailData.num}}</div>
								</div>
								<div class="text4">{{detailData.price}}</div>
							</div>
						</div>

						<div class="flex-between" style="padding:0.4rem 0;border-top:1px solid #eee">
							<div></div>
							<div>
								共{{detailData.num}}件商品实付：<span class="text2">{{detailData.priceAll}}</span>
							</div>
						</div>
					</div>
				</div>

				<!-- 底部操作栏 -->
				<div class="bottom">

					<van-button class="button3" :loading='loading' @click="pay">立即支付</van-button>
				</div>
				<!-- 底部操作栏 end -->
			</div>
		</van-skeleton>
	</div>
</template>
<script>
export default {
	name: 'app',
	components: {},
	data() {
		return {
			time: 5 * 60 * 1000,
			loading: false,
			detailData: [],
			goodsPa: {}, // 选中的规格
			activeIcon: require('@/assets/images/radio2.png'),
			inactiveIcon: require('@/assets/images/radio.png'),
			couponNum: 1,
			payType: '', //CASH PV BOTH
			totalPrice: '0.00元',
		};
	},

	created() {
		// this.get_goods();
		this.loadOrder_order();
	},
	methods: {
		pay() {
			this.loading = true;
			this.chooseWXPay(this.$route.query.pkey);
		},
		loadOrder_order(pkey) {
			var params = {
				pkey: this.$route.query.pkey,
			};
			this.$myApi.loadOrder_order(params).then((res) => {
				if (res.code == 0) {
					this.detailData = res.result;
					this.time =
						new Date(res.result.payExpirationTime) - new Date();
				} else {
				}
			});
		},
		computePrice() {
			var totalPrice = 0;
			if (this.payType == 'CASH') {
				totalPrice =
					(this.goodsPa.price * this.couponNum).toFixed(2) + '元';
			} else if (this.payType == 'PV') {
				totalPrice =
					(this.goodsPa.pv * this.couponNum).toFixed(2) + '积分';
			} else if (this.payType == 'BOTH') {
				totalPrice =
					(this.goodsPa.partPrice * this.couponNum).toFixed(2) +
					'元+' +
					(this.goodsPa.partPv * this.couponNum).toFixed(2) +
					'积分';
			}
			this.totalPrice = totalPrice;
		},
		submit() {
			if (!this.payType) {
				this.$notify({ type: 'warning', message: '请选择支付方式' });

				return;
			}
			this.loading = true;
			var params = {
				goods: this.$route.query.pkey,
				goodsPa: this.goodsPa.pkey,
				num: this.couponNum,
				payType: this.payType,
			};
			this.$myApi.commitOrder_order(params).then((res) => {
				this.loading = false;
				if (res.code == 0) {
					this.$notify({ type: 'success', message: '操作成功' });
				} else {
				}
			});
		},
		get_goods(pkey) {
			var params = {
				pkey: this.$route.query.pkey,
			};
			this.$myApi.get_goods(params).then((res) => {
				if (res.code == 0) {
					if (this.$route.query.goodsPa) {
						res.result.goodsPaList.map((item) => {
							if (item.pkey == this.$route.query.goodsPa) {
								this.goodsPa = item;
							}
						});
					} else {
						this.goodsPa = res.result.goodsPaList[0];
					}

					this.detailData = res.result;
				} else {
				}
			});
		},
	},
};
</script>
<style lang="less" scoped>
#payOrder {
	padding-left: 0rem;
	padding-right: 0rem;
	min-height: 100vh;
	background-color: #fafafa;
	padding-bottom: 1.5rem;
	img {
		width: 100%;
	}
	.bannerImg {
		height: 7.5rem;
		width: 100%;
	}
	.text1 {
		font-size: 0.28rem;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;

		margin-right: 0.2rem;
	}
	.timeData {
		background: #ffffff;
		border-radius: 10px;
		margin-right: 0.1rem;
		font-size: 0.26rem;
	}
	.text2 {
		font-size: 0.4rem;
		font-family: PingFang SC;
		font-weight: bold;
		color: #D95954;
		margin-bottom: 0.55rem;
	}
	.bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 0.16rem 0.24rem;
		background: #fff;
		.icon {
			width: 0.36rem;
			height: 0.36rem;
		}
		.text1 {
			font-size: 0.22rem;
			color: #333333;
		}
		.text2 {
			font-size: 0.34rem;
			font-weight: bold;
			color: #D95954;
			margin-right: 0.2rem;
		}
	}
	.goodsWrap {
		width: 100%;
		overflow-x: scroll;
		.icon1 {
			height: 1.14rem;
			width: 1.14rem;
			border-radius: 10px;
			margin-right: 0.24rem;
		}
		.icon2 {
			width: 0.32rem;
			height: 0.32rem;
			margin-bottom: 0.12rem;
		}
		.icon3 {
			width: 0.24rem;
			height: 0.3rem;
			margin-bottom: 0.12rem;
		}
		.text3 {
			font-size: 0.3rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			width: 3.3rem;
			// margin-bottom: 0.1rem;
		}
		.text4 {
			font-size: 0.24rem;
			font-weight: 500;
			color: #666666;
			margin-top: 10px;
		}
	}
	.whiteWrap {
		width: 7rem;
		padding: 0.24rem 0.16rem;
		margin-left: 0.25rem;
		background: #fff;
		position: relative;
		box-sizing: border-box;
		margin-top: 0.2rem;
		.img-icon {
			height: 0.32rem;
			width: 0.32rem;
		}
		.title {
			font-size: 0.32rem;
			color: #333333;
			font-weight: 800;
			margin-bottom: 0.24rem;
		}
		.text1 {
			font-size: 0.28rem;
			color: #333333;
		}
	}
	.button {
		background: #ffce17;
		border-radius: 20px;
		font-size: 0.26rem;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333;
		padding: 0.1rem 0.34rem;
		height: auto;
	}
	.button3 {
		background: #ffce17;
		border-radius: 50px;
		font-size: 0.32rem;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333;
		padding: 0.3rem 0.57rem;
		height: auto;
		width: 100%;
	}

	.button2 {
		.button();
		background: #D95954;
		color: #fff;
		padding: 0.17rem 0.23rem;
	}
}
</style>
<style lang="less" scoped>
/deep/.van-stepper--round .van-stepper__plus {
	color: #fff;
	background-color: #D95954;
}
/deep/.van-radio__label {
	flex: 1;
}
</style>
